<template>
  <div class="attr-list">
    <CommonForm :onChange="handleChange" :formData="pageSetting" :formJson="formJson" />
    <SaveAsTemplate />
  </div>
</template>

<script >
import { mapState } from 'vuex'
import getStyleFormJson from "./setting"
import CommonForm from "@/components/CommonForm"
import { addSnapshot } from "../../../lib/utils"
import { uploadImg } from "../../../lib/upload"
import SaveAsTemplate from "./SaveAsTemplate"

export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState("lowCode", {
      pageSetting: state => state.pageSetting
    }),
    formJson () {
      return getStyleFormJson(this.beforeUpload)
    }
  },
  components: {
    CommonForm,
    SaveAsTemplate
  },
  methods: {
    handleChange (fieldName, value) {
      console.log(fieldName, value)
      this.pageSetting[fieldName] = value
      this.$store.commit("lowCode/setPageSetting", this.pageSetting)
      addSnapshot('page', {
        pageSetting: this.pageSetting
      })
    },
    beforeUpload (file) {
      uploadImg(file, 'value', this.pageSetting)
      .then((img) => {
        this.pageSetting.backgroundImage = img
        this.$store.commit("lowCode/setPageSetting", this.pageSetting)
        addSnapshot('page', {
          pageSetting: this.pageSetting
        })
      })
      return false
    },
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
